<template>
  <div class="loadingWrapper">
    <!--如果传入了插槽就使用插槽里边的内容(一般是传入图标)-->
    <template v-if="slots.default">
      <slot></slot>
    </template>
    <template v-else>
      <component :is="props.component" v-bind="attrs" :style="{ fontSize: fontSizeWrapper }" />
    </template>
    <!--如果默认的text不满足需求可以使用插槽定制-->
    <template v-if="slots.title">
      <slot name="title"></slot>
    </template>
    <tempalte v-else>
      <span>{{ title }}</span>
    </tempalte>
  </div>
</template>

<script lang="ts" setup>
import { useAttrs, useSlots, computed } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
const attrs = useAttrs()
const slots = useSlots()
const props = defineProps({
  component: {
    type: [Object, Function],
    default: () => LoadingOutlined
  },
  fontSize: {
    type: Number,
    default: 30
  },
  title: {
    type: Text,
    default: '正在导入聊天记录...'
  }
})
const fontSizeWrapper = computed(() => `${props.fontSize}px`)
</script>
<style lang="less" scoped>
.loadingWrapper {
  height: 100vh;
  width: 100vw;
  background-color: #000000b8;
  position: fixed;
  top: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
  font-size: 16px;
  gap: 20px;
}
</style>
